<template>
	<view>
		<view class="clueQuantity_change_title">线索量变化</view>
		<view class="clueQuantity_change" :style="{height: height+'rpx'}">
			<view class="qiun-columns" style="overflow: hidden;">
				<slot></slot>
				<view><echarts :option="optionStackFun()" :style="{height: height+'rpx'}"></echarts></view>
			</view>
		</view>
	</view>
</template>

<script>
import echarts from '@/components/echarts/echarts.vue';
export default {
	data() {
		return {
			//堆叠柱状图数据
			optionStack: {}, //堆叠柱状图配置
			color: ['#FD5757', '#FECD2F', '#7CDEBC', '#3CB3D0', '#5D9BFC'],
			// color: ['#5D9BFC', '#3CB3D0', '#7CDEBC', '#FECD2F', '#FD5757'],
			// color: [ '#7CDEBC', '#FECD2F', '#FD5757'],
			// level:[],
			// level:[],

		};
	},
	props:{
		echartsData:{
			type:Object
		},
		height:{
			type:String,
			default:'420'
		}
	},
	watch:{
		echartsData(Val){

			return Val
		},
	},
	components: {
		echarts
	},
	computed:{
		level(){
			
			let levelArr=[]
			this.echartsData['series'].forEach((v,i)=>{
				levelArr.push(v.name)
			})
			return levelArr
		},
	},
	created() {
		
	},
	methods: {
		//堆叠柱状图数据
		optionStackFun() {
			console.log(this.echartsData,this.level,'-----------堆叠柱状图数据')
			return {
				tooltip: { 				
					trigger: 'axis',
					confine:true,
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					backgroundColor: '#222222',
					extraCssText: 'box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);',
					formatterStatus:true,
					formatFunClue:'formatFunClue',
					//  formatter:function(data) {
					// 	var res = ''
					// 	var sum = 0
					// 	var arrTip=[]
					// 	data.forEach((item,index) => {
					// 		sum += item.value
					// 		res = `${item.marker} <span style='color: #FFFFFF'>${item.seriesName} : ${item.value}</span> <br/>`
					// 		arrTip.unshift(res)
					// 		if(index==data.length-1) {
					// 			res = `<span style='color: #FFFFFF'>总数 : ${sum}</span>`
					// 			arrTip.push(res)
					// 		}	
					// 	})
					// 	arrTip=arrTip.join().replace(/,/g,"");
					// 	return arrTip
					// }			
				},
				// color: this.color,
				legend: {
					data: this.level,
					left: 30,
					top:20,
					icon: "circle",
					itemGap: 20,
					itemWith:10,
					itemHeight:10
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: this.echartsData.categories,
						axisLine: {
							show: false
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						axisLabel: {
							show: true,
							interval: 'auto',
							// formatter: '{value} %'
						},
						show: true,
						axisLine: {show:false}
					}
				],
				series: this.echartsData.series,		
			};	
		
		},

	},

};
</script>
<style scoped lang="scss">
.clueQuantity_change_title {
	font-size: 32rpx;
	color: #43425d;
	padding-left: 30rpx;
	background-color: #f5f6fa;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
}
.clueQuantity_change {
    width: 100%;
    height: 440rpx;
    background-color: #ffffff;


}
</style>
